<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset="utf-8" />
	<title>基础模块</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="<?php echo base_url('public/styles/bootstrap/css/bootstrap.min.css'); ?>" />
	<script src="<?php echo base_url('public/scripts/jquery-3.2.1.min.js'); ?>"></script>
	<script src="<?php echo base_url('public/scripts/jquery.qrcode.js'); ?>"></script>
	<script src="<?php echo base_url('public/scripts/qrcode.js'); ?>"></script>
	<style type="text/css">

		::selection { background-color: #E13300; color: white; }
		::-moz-selection { background-color: #E13300; color: white; }

		body {
			background-color: #fff;
			margin: 40px;
			font: 13px/20px normal Helvetica, Arial, sans-serif;
			color: #4F5155;
		}

		a {
			color: #003399;
			background-color: transparent;
			font-weight: normal;
		}

		h1 {
			color: #444;
			background-color: transparent;
			border-bottom: 1px solid #D0D0D0;
			font-size: 19px;
			font-weight: normal;
			margin: 0 0 14px 0;
			padding: 14px 15px 10px 15px;
		}

		code {
			font-family: Consolas, Monaco, Courier New, Courier, monospace;
			font-size: 12px;
			background-color: #f9f9f9;
			border: 1px solid #D0D0D0;
			color: #002166;
			display: block;
			margin: 14px 0 14px 0;
			padding: 12px 10px 12px 10px;
		}

		#body {
			margin: 0 15px 0 15px;
		}

		p.footer {
			text-align: right;
			font-size: 11px;
			border-top: 1px solid #D0D0D0;
			line-height: 32px;
			padding: 0 10px 0 10px;
			margin: 20px 0 0 0;
		}

		#container {
			margin: 10px;
			border: 1px solid #D0D0D0;
			box-shadow: 0 0 8px #D0D0D0;
		}
	</style>
</head>
<script>
	$(document).ready(function(){
		if( typeof(WebSocket) != "function" ) {
			$('body').html("<div id='container'><h1>发生错误</h1><p style='margin: 12px 15px 12px 15px;'>您的浏览器不支持 HTML5 Web Sockets，请尝试更换或升级</p></div>");
		}else{
			var websocket = new WebSocket('<?php echo config_item('websocket_server'); ?>');
			websocket.onopen = function (evt) {
				console.log("connected to WebSocket server.");
				websocket.send('<?php echo $shake_hands; ?>');
			};
			websocket.onclose = function (evt) {
				console.log("server disconnected!");
			};
			websocket.onmessage = function (evt) {
				if(evt.data){
					var data = JSON.parse(evt.data);
					if(data.status != 0){
						console.log('error: '+ data.status);
					}else{
						switch(data.method){
							case 'shake_hands':
								ajax_post(data,function(result){
									if(result.error){
										alert(result.msg);
										console.log('shake hands error');
										console.log(data);
									}else{
										websocket.send('<?php echo $register; ?>'); //握手验证成功，发起注册
										console.log('shake hands success! do register');
									}
								},'json');
								break;
							case 'register':
								console.log('client registration success! waiting for sweep login ...');
								ajax_post(data,function(result){},'json');
								break;
							case 'scan':
								console.log('the qrcode has been scanned!');
								ajax_post(data,function(result){},'json');
								break;
							case 'login':
								ajax_post(data,function(result){
									if(result.error){
										alert(result.msg);
										console.log('sweep login error');
										console.log(data);
									}else{
										var myDate = new Date();
										$("#dialog").append('<p style="color: green">用户 '+ result.msg +' 扫码成功！('+ myDate.toLocaleDateString() + ' ' + myDate.toLocaleTimeString() +')</span>');
										console.log('sweep login success!');
									}
								},'json');
								break;
							default:
								console.log('return data error!');
								console.log(data);
						}
					}
					//console.log('server: ' + evt.data);
				}
			};
			websocket.onerror = function (evt, e) {
				alert('websocket 服务器错误，请使用 console 工具进行调试');
				console.log(evt);
			};
			var qrcode = '<?php echo site_url('/').'demo_basic/login/'.$client_id; ?>';
			$("#qrcode").qrcode({width:200,height:200,correctLevel:0,text:qrcode});
			$("#body").append('<a href="'+ qrcode +'" target="_blank">'+ qrcode +'</a>');
			//console.log(qrcode);
		}
	});
	function ajax_post(data,success,type = 'text'){
		$.ajax({
			type: 'POST',
			url: '' ,
			data: data ,
			timeout: 5000,
			success: success,
			error: function(XMLHttpRequest,status,error){
				alert('数据返回有误！请刷新页面后重试');
			},
			complete : function(XMLHttpRequest,status){
				if(status == 'timeout'){
					ajax.abort();
					alert('操作超时！请重试');
				}
			},
			dataType: type
		});
	}
</script>
<div id="container">
	<h1>请扫描二维码登录</h1>
	<div id="body">
		<p id="dialog">&nbsp</p>
		<p id="qrcode"></p>
	</div>
	<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo  (ENVIRONMENT === 'development') ?  'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>